<template>
  <div id="app">
    <router-view v-if="!this.$store.state.leftFlag" />
    <el-row style="height: 100%;" v-else>
      <el-col :span="3" class="leftNav">
        <div class="leftTop">
          <img src="@/assets/logo.png" alt />
        </div>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          router
          background-color="#23262E"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

          <el-submenu v-for="(item, index) in list" :key="index" :index="index" v-if="item.nextMenu !== null && item.rootMenu.webUrl === ''">
            <template slot="title">
              <span>{{item.rootMenu.permissionName}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(demo, test) in item.nextMenu" :key="test" :index="demo.webUrl" v-if="demo.webUrl !== ''">
                {{demo.permissionName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-for="(item, index) in list" :key="index" :index="item.rootMenu.webUrl" v-if="item.rootMenu.webUrl !== ''">
            <span slot="title">{{item.rootMenu.permissionName}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="21" style="height: 100%;position: relative;margin-left:12.5%;">
        <div style="overflow: hidden;background-color:#23262E">
          <div style="padding:10px 30px;float: right;">
            <el-button type="primary" class="logOut" @click="logout()">退出登录</el-button>
            <el-button type="primary" class="logOut" @click="topsd()">修改密码</el-button>
          </div>
        </div>
        <router-view style="padding: 20px 10px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'App',
  data () {
    return {
      items: window.localStorage.getItem('islogin'),
      value1: 0,
      path: '',
      list: this.$store.state.routeList,
      leftFlag: this.$store.state.leftFlag
    }
  },
  methods: {
    logout () {
      this.$store.state.isLogin = false
      localStorage.clear()
      request({
        url: '/my/loginOut',
        method: 'get'
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          this.$store.state.isLogin = false
          this.$store.state.routeList = []

          window.localStorage.setItem('islogin', false)
          this.$router.push({
            name: 'login'
          })
        }
      })
    },
    saveState () {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    },
    topsd () {
      this.$router.push({
        name: 'changePassword'
      })
    }
  },
  created () {
    if (
      this.$route.path === '/login' &&
      (!this.$store.state.isLogin || !window.localStorage.getItem('islogin'))
    ) {
      this.$router.push({
        name: 'index'
      })
    }
    if (this.list === []) {
      this.$router.push({
        name: 'login'
      })
    }
  },
  beforeDestroy () {
    console.log(this.$route.path)
  },
  mounted () {
    window.addEventListener('unload', this.saveState)
    const _this = this
    // 监听URL变化
    window.addEventListener('hashchange', function () {
      // 根据需求...
      let obj = {
        stuuids: _this.$route.query.stuuids, // 获取URL中的新值
        accessno: _this.$route.query.accessno,
        areacode: _this.$route.query.areacode
      }
      // _this.getStudyDetails(obj)// 调用接口
      console.log(obj)
    })
  },
  watch: {
    $route (to, from) {
      if (to.name === 'login') {
        this.$store.state.leftFlag = false
      } else {
        this.$store.state.leftFlag = true
        if (to.name === 'index') {
          request({
            url: '/my/findLoginUserMenu',
            method: 'get'
          }).then(res => {
            // console.log(res)
            if (res.code === '00000000') {
              this.list = res.data
              this.$store.state.routeList = res.data
            }
          })
        }
      }
      // console.log()
      // this.list = this.$store.state.routeList
    }
  }
}
</script>

<style lang='less'>
#app {
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: hidden;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.top {
  overflow: hidden;
  padding: 10px 40px;
  .logOut {
    float: right;
    font-size: 24px;
    padding: 10px 30px;
  }
}
.leftTop {
  text-align: center;
  padding-top: 25px;
  img {
    width: 25%;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-menu-item, .el-submenu__title, .el-menu-item-group__title {
  text-align: center;
  width: 100.5%;
}
.el-submenu .el-menu-item {
  box-sizing: border-box;
}
.el-menu-item-group > div {
  display: none;
}
.leftNav {
  background-color:#23262E;
  height:100%;/* works only if parent container is assigned a height value */
  position: fixed;
  overflow: auto;
  height:auto;
  height:100%;
}
.leftNav::-webkit-scrollbar { display: none; }
</style>
